class NumRoll{
    constructor(options={}){
        this.el=document.getElementById(options.id);
        this.initHtml();
        this.uls=this.el.querySelectorAll('ul');
        this.bindEvent();
        
    }
    isLock=false;
    data=[0,0,0,0,0];

    /*
    *   设置数据的方法
    */
   setData(data){
        const arr=Array.from(data+'');
        this.data=arr.map(num=>{
            return Number(num);
        })
   }
   /*
    * 初始化HTML
    */
   initHtml(){
        const html=[];
        const data=this.data;
        for(let i=0;i<data.length;i++){
            let lis=[]
            for(let j=0;j<10;j++){
                lis.push(`<li>${j}</li>`)
            }
            html.push(`<div class="item">
                       <ul num=${data[i]}>
                          ${lis.join('')}
                       </ul>
                       </div>`);
        }
        // console.log(html.join(''));
        this.el.innerHTML=html.join('');
   }
   /*
   * 每个单个数字滚动
   */
   runOneNum(num,index)
   {
       const numHeight=90;
       const ul=this.uls[index];
       const prevNum=Number(ul.getAttribute('num')); //上一个值
       let course=num-prevNum;
       if(prevNum>num) //上一个值大于要滚动到值
        {
            course=10-prevNum+num
        }
        ul.setAttribute('num',num); // 上一个值的更新
        const dis=-course*numHeight+'px'; // 移动的距离
        ul.style.transform=`translate3d(0,${dis},0)`;
   }
   /*
   * 滚动
   */
   run(tag){
        if(this.isLock==true) return;
        this.isLock=true;
        this.data.forEach((num,index)=>{
            // console.log(num,index);
            this.runOneNum(num,index);
        })
   }

   /**
    * 绑定事件
    */
   bindEvent(){
    this.uls.forEach(ul=>{
        // ul 滚动结束后触发的事件
        ul.addEventListener('transitionend',()=>{
            // console.log(ul);
            const num=Number(ul.getAttribute('num'));
            this.renderBottonNum(ul,num);
            this.isLock=false;
        })
     })
   }
   /**
    * 绘制底部的滚送数字
    */
   renderBottonNum(ul,num)
   {
        // console.log(num);
        const htmls=[];
        for(let i=num;i<num+10;i++){
            const showNum=i>9?i-10:i;
            htmls.push(`<li>${showNum}</li>`)
        }
        // console.log(htmls);
        ul.innerHTML=htmls.join('');  
        this.backToTop(ul);
   }
   /**
    *  全部回到头部位置
   */
  backToTop(ul)
  {
      ul.style.transitionDuration='0s';
      ul.style.transform='translate3d(0,0,0)';
      setTimeout(() => {
        ul.style.transitionDuration='1.5s';
      }, 10);
     
  }
}
// mainId
const r=new NumRoll({
    id:"mainId"
})
setTimeout(() => {
    r.setData(12365);
    r.run();
}, 2000);
